<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <tr>
            <td><input type="text" class="keyword" placeholder="关键字"></td>
            <td><input type="button" onclick="query()" value="查询"></td>
            <td><input type="button" onclick="add()" value="新增"></td>
        </tr>
    </div>

    <table>
        <thead>
            <tr>
                <td>id</td>
                <td>name</td>
                <td>age</td>
                <td>班级</td>
                <td>操作</td>
            </tr>
        </thead>

        <tbody id="tbdata"></tbody>
    </table>
    <div>
        <input type="button" onclick="upIndex()" value="上一页">
        <input type="button" onclick="downIndex()" value="下一页">
    </div>
</body>

</html>

<script src="./js/jq.js"></script>
<script src="./config/baseUrl.js"></script>
<script src="./js/api.js"></script>
<script src="./config/page.js"></script>
<script>
    $(function () {
        init()
    })

    function init() {
        let keyword = $('.keyword').val() || ''
        console.log('keyword:' + keyword);
        getList(keyword).then(res => {
            $('.tbdata').remove()
            res.forEach(item => {
                let html = `
                <tr class="tbdata" key=${item.id}>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.className}</td>
                    <td>
                        <input type="button" onclick="edit(${item.id})" value="编辑">
                        <input type="button" onclick="del(${item.id})" value="删除">
                    </td>
                </tr>
                `
                $('#tbdata').append(html)
            })
        })
    }

    function query() {
        let keyword = $('.keyword').val() || ''
        init(keyword)
    }

    function add() {
        location.href = 'addOrEdit.html'
    }
    function edit(id) {
        location.href = `addOrEdit.html?id=${id}`
    }
    function del(id) {
        delList(id).then(res => {
            $(`[key=${id}]`).remove()
        })
    }
    function upIndex() {
       

        pageIndex = pageIndex - 1
        if (pageIndex === 0) {
            pageIndex = 1
        }

        getListOr2(pageIndex).then(res => {
            $('.tbdata').remove()
            res.forEach(item => {
                let html = `
                <tr class="tbdata" key=${item.id}>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.className}</td>
                    <td>
                        <input type="button" onclick="edit(${item.id})" value="编辑">
                        <input type="button" onclick="del(${item.id})" value="删除">
                    </td>
                </tr>
                `
                $('#tbdata').append(html)
            })
        })
    }
    function downIndex() {
         

        pageIndex = pageIndex + 1
        console.log(pageIndex);

        getListOr2(pageIndex).then(res => {
            console.log(res);
            $('.tbdata').remove()
            res.forEach(item => {
                let html = `
                <tr class="tbdata" key=${item.id}>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.className}</td>
                    <td>
                        <input type="button" onclick="edit(${item.id})" value="编辑">
                        <input type="button" onclick="del(${item.id})" value="删除">
                    </td>
                </tr>
                `
                $('#tbdata').append(html)
            })
        })
    }
</script>
